<template>
    <div class="tabs">
        <div
            :class="`tabs-item ${index === current ? 'active' : ''}`"
            v-for="(item, index) in tabs"
            :key="index"
            @click="change(index)"
        >{{ item.title }}</div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            gap: 10 // 间隔距离 px
        }
    },
    props: {
        tabs: {
            type: Array,
            default: () => {
                return []
            }
        },
        current: {
            type: Number,
            default: 0
        }
    },
    methods: {
        change (index) {
            this.$emit('change', index)
        }
    }
}
</script>
<style lang="less" scoped>
.tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1rem;
    .tabs-item {
        width: 49.8%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.3rem;
        color: #9d9d9d;
        background-color: #51341c;
        &.active {
            background-color: #cb8345;
            color: #ffffff;
        }
    }
}
</style>
